import React, { Component } from 'react';
import { Row, Col, Card, Icon, Timeline, Tag, Avatar, Spin } from 'antd';
import styles from './Home.css';
import cns from 'classnames/bind';

const cx =  cns.bind(styles);

export default class Home extends Component {
  render() {
    return(
      <div>
        <Row gutter={16}>
          <Col span={16}>
            <Card title="博客动态" bordered={true}>
              <Timeline style={{ marginLeft: '130px' }}>
                <Timeline.Item dot={<Avatar size="small" />}>
                  <Tag style={{ position: 'absolute', left: '-130px', top: '-2px' }}>2017-09-03 11:20</Tag>
                  <h4><a>博客题目</a></h4>
                  <p>
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                  </p>
                </Timeline.Item>
                <Timeline.Item dot={<Avatar size="small" />}>
                  <Tag style={{ position: 'absolute', left: '-130px', top: '-2px' }}>2017-09-03 11:20</Tag>
                  <h4><a>博客题目</a></h4>
                  <p>
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                  </p>
                </Timeline.Item>
                <Timeline.Item dot={<Avatar size="small" />}>
                  <Tag style={{ position: 'absolute', left: '-130px', top: '-2px' }}>2017-09-03 11:20</Tag>
                  <h4><a>博客题目</a></h4>
                  <p>
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                  </p>
                </Timeline.Item>
                <Timeline.Item dot={<Avatar size="small" />}>
                  <Tag style={{ position: 'absolute', left: '-130px', top: '-2px' }}>2017-09-03 11:20</Tag>
                  <h4><a>博客题目</a></h4>
                  <p>
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                    正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分
                  </p>
                </Timeline.Item>
              </Timeline>
              <p style={{ textAlign: 'center' }}><Spin size="small" /></p>
              <p style={{ textAlign: 'center' }}><a>查看更多>></a></p>
            </Card>
          </Col>
          <Col span={8}>
            <Row>
              <Col span={24}>
                <Card title="天气" bordered={true}>
                  <div style={{ overflow: 'hidden' }}>
                    <span style={{ float: 'left' }}><Icon type="environment-o" /><span style={{ marginLeft: '5px' }}>杭州</span></span>
                    <span style={{ float: 'right', color: '#999' }}>更新于35分钟前</span>
                  </div>
                  <div>
                    <span>25'c</span>
                    <span>小图标</span>
                  </div>
                </Card>
              </Col>
            </Row>
            <Row style={{ marginTop: '16px' }}>
              <Col span={24}>
                <Card title="音乐" bordered={true}>Card content</Card>
              </Col>
            </Row>
            <Row style={{ marginTop: '16px' }}>
              <Col span={24}>
                <Card title="电影" bordered={true}>Card content</Card>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    );
  }
}
